<template>
    <div class="box" @scroll="scrollFun">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-tabs v-model:active="active">
                <van-tab title="标签 1">
                    <van-card v-for="(v, i) in list" :key="i" num="2" :price="v.totalPrice" :desc="v.username"
                        :title="v.product_code" thumb="">
                        <template #tags>
                            <lazy-component >
                            <img style="width: 6rem;height: 6rem;" src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="">
                            </lazy-component>
                        </template>
                        <template #footer>
                            <van-button size="mini">按钮</van-button>
                            <van-button size="mini">按钮</van-button>
                        </template>
                    </van-card>
                </van-tab>
                <van-tab title="标签 2">内容 2</van-tab>
                <van-tab title="标签 3">内容 3</van-tab>
                <van-tab title="标签 4">内容 4</van-tab>
            </van-tabs>
        </van-pull-refresh>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import { getOrderListApi } from '@/api/api'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const active = ref(route.query.i)

let list = ref("")
const getlist = () => {
    getOrderListApi().then(res => {
        list.value = res.data.data
        setTimeout(() => {
            document.querySelector('.box').scrollTop=localStorage.getItem('scrollTop')
        }, 1000)
    })
}
getlist()

const scrollFun = (e) => {
    // console.log(e.target.scrollTop);
    localStorage.setItem('scrollTop', e.target.scrollTop)
}
import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;

    }, 1000);
};
</script>

<style lang="scss" scoped>
.box {
    overflow: auto;
}
</style>